import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { protoActions } from 'reduxs'
import { getDataSource, getFlagValue, showTeam, getTeamFlag, getPageFlag } from 'services/utils'
import DescriptionList from 'ant-design-pro/lib/DescriptionList'
import QueryTable from '../components/query-table'
import _ from 'lodash'

const accessFlag = getPageFlag('/proto-data/base-data', 'access')
const { Description } = DescriptionList

@connect(
  state => ({
    parser              : state.Proto.parser
  }),
  dispatch => ({
    actions: bindActionCreators({ 
      ...protoActions
    }, dispatch)
  })
)
export default class BaseData extends PureComponent {

  render () {
    const { location, parser, paths } = this.props
    let options = {
      layoutOptions: {
        location,
        pageCode: accessFlag.value,
        breadcrumb: [
          { name: '主页', link: '/' },
          { name: '数据统计类' },
          { name: '基础数据查询' }
        ],
      },
      searchOptions: {
        begin_end: {
          name: '时间段',
          format: 'YYYY-MM-DD',
          required: { required: true, message: `请选择时间段!` }
        },
        roleId: {
          name: '渠道',
          type: 'paths',
          required: { required: true, message: `请选择渠道!` }
        }
      },
      proto: 'base-data',
      tableColumns: [
        {
          key: '1',
          title: '日期',
          dataIndex: 'data_0',
          render: (data_0) => data_0.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'),
          fixed: 'left',
          width: 120
        },
        {
          key: '2',
          title: '新增进入大厅',
          dataIndex: 'data_1',
          width: 150
        },
        {
          key: '3',
          title: '活跃人数',
          dataIndex: 'data_2',
          width: 100
        },
        {
          key: '4',
          title: '次日留存率',
          dataIndex: 'data_3',
          width: 150
        },
        {
          key: '5',
          title: '2日付费率',
          dataIndex: 'data_4',
          width: 100
        },
        {
          key: '6',
          title: '3日付费率',
          dataIndex: 'data_5',
          width: 100
        },
        {
          key: '7',
          title: '7日付费率',
          dataIndex: 'data_6',
          width: 100
        },
        {
          key: '8',
          title: '充值总额',
          dataIndex: 'data_7',
          width: 100
        },
        {
          key: '9',
          title: '兑换消耗',
          dataIndex: 'data_8',
          width: 100
        },
        {
          key: '10',
          title: '充值人数',
          dataIndex: 'data_9',
          width: 100
        },
        {
          key: '11',
          title: '充值次数',
          dataIndex: 'data_10',
          width: 100
        },
        {
          key: '12',
          title: '金币总和',
          dataIndex: 'data_11',
          render: (data_11) => parseInt(data_11).toLocaleString(),
          width: 150
        },
        {
          key: '13',
          title: '奖券总和',
          dataIndex: 'data_12',
          render: (data_12) => parseInt(data_12).toLocaleString(),
          width: 150
        },
        {
          key: '14',
          title: '非新增首次付费',
          dataIndex: 'data_13',
          width: 150
        },
        {
          key: '15',
          title: '首日付费人数',
          dataIndex: 'data_14',
          width: 150
        },
        {
          key: '16',
          title: '首日付费金额',
          dataIndex: 'data_15',
          width: 150
        },
        {
          key: '17',
          title: '破产人数',
          dataIndex: 'data_16',
          fixed: 'right',
          width: 150
        }
      ],
      tableScroll: { x: 2100 },
      tablePagination: true,
      //remark: []

    }
    return (
      <QueryTable  {...options} />
    )
  }
}